<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="main">
			<div class="gradient-box1 box"></div>
			<div class="gradient-box2 box"></div>
			<div class="gradient-box3 box"></div>
			<div class="gradient-box4 box"></div>
			<div class="gradient-box5 box"></div>
		</div>
	</body>
	<style>
		/* 
        线性渐变（径向渐变、角向渐变）是不支持 `animation` 的，单色的 background 是支持的。

        - 通过 background-position 模拟渐变动画
        - 通过 background-size 模拟渐变动画
        - 通过 transform 模拟渐变动画
        - 通过滤镜 hue-rotate 实现渐变动画
        - 使用 CSS @property 实现背景色渐变动画  2024 新出 注意兼容性
        [MDN -- CSS Property](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@property)
        前两种方法 `background-position` 和 `background-size`，并且在渐变中改变这两个属性，导致页面不断地进行大量的重绘
        */
        
		.main {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.box {
			width: 300px;
			height: 200px;
			margin-bottom: 16px;
		}
		.gradient-box1 {
			background: linear-gradient(
				90deg,
				#ffc700 0%,
				#e91e1e 50%,
				#6f27b0 100%
			);
			background-size: 200% 100%;
			background-position: 0 0;
			animation: bgposition 2s infinite linear alternate;
		}

		@keyframes bgposition {
			0% {
				background-position: 0 0;
			}
			100% {
				background-position: 100% 0;
			}
		}

		.gradient-box2 {
			background: linear-gradient(
				90deg,
				#ffc700 0%,
				#e91e1e 33%,
				#6f27b0 66%,
				#00ff88 100%
			);
			background-position: 100% 0;
			animation: bgSize 5s infinite ease-in-out alternate;
		}

		@keyframes bgSize {
			0% {
				background-size: 300% 100%;
			}
			100% {
				background-size: 100% 100%;
			}
		}

		.gradient-box3 {
			position: relative;
			overflow: hidden;
			border: 0.5px solid #000;

			&::before {
				content: "";
				position: absolute;
				top: -100%;
				left: -100%;
				bottom: -100%;
				right: -100%;
				background: linear-gradient(
					45deg,
					#ffc700 0%,
					#e91e1e 50%,
					#6f27b0 100%
				);
				background-size: 100% 100%;
				animation: transform-an 5s infinite linear alternate;
				z-index: -1;
			}
		}

		@keyframes transform-an {
			0% {
				transform: translate(30%, 30%);
			}
			25% {
				transform: translate(30%, -30%);
			}
			50% {
				transform: translate(-30%, -30%);
			}
			75% {
				transform: translate(-30%, 30%);
			}
			100% {
				transform: translate(30%, 30%);
			}
		}

		.gradient-box4 {
			background: linear-gradient(45deg, #5fddcc, #ff004d);
			animation: hueRotate 10s infinite alternate;
		}

		@keyframes hueRotate {
			0% {
				filter: hue-rotate(0);
			}
			100% {
				filter: hue-rotate(360deg);
			}
		}

		@property --colorA {
			/* 自定义属性的类型 */
			syntax: "<color>";
			/* 是否允许继承 */
			inherits: false;
            /* 初始值 */
			initial-value: fuchsia;
		}
		@property --colorC {
			syntax: "<color>";
			inherits: false;
			initial-value: #f79188;
		}
		@property --colorF {
			syntax: "<color>";
			inherits: false;
			initial-value: red;
		}
		.gradient-box5 {
			background: linear-gradient(
				45deg,
				var(--colorA),
				var(--colorC),
				var(--colorF)
			);
			animation: change 10s infinite linear;
		}

		@keyframes change {
			20% {
				--colorA: red;
				--colorC: #a93ee0;
				--colorF: fuchsia;
			}
			40% {
				--colorA: #ff3c41;
				--colorC: #e228a0;
				--colorF: #2e4c96;
			}
			60% {
				--colorA: orange;
				--colorC: green;
				--colorF: teal;
			}
			80% {
				--colorA: #ae63e4;
				--colorC: #0ebeff;
				--colorF: #efc371;
			}
		}
	</style>
</html>
